import React, { Component } from "react";

import { Flex } from "antd-mobile";

// 解决非Route注册组件中使用history对象的步骤1：
import { withRouter } from "react-router-dom";

import { get_Current_CityData } from "../../utils/http_biz";
import { CURRENT_CITY_KEY } from "../../utils/config";

class Search extends Component {
  state = { cityName: "北京" };

  // 在该组件的加载完成的生命周期方法中通过百度地图api获取到当前城市
  async componentDidMount() {
    // // 1.0 在react组件中要使用百度地图的BMap对象，必须使用window来调用，否则访问不到
    // var myCity = new window.BMap.LocalCity();
    // myCity.get(async (result) => {
    //   // alert(result.name); // 获取到了当前城市名称
    //   // 2.0 调用/area/info?name=广州市 去服务器获取到广州的对象数据:
    //   /*{
    //     "label": "广州",
    //     "value": "AREA|e4940177-c04c-383d"
    //   }*/
    //   let cityObj = await get_City_Data({ name: result.name }); //传入百度地图获取到的城市名称
    //   // 2.0.1 将当前城市名称设置给状态属性cityName
    //   let { label } = cityObj.body;
    //   this.setState({ cityName: label });
    //   // 3.0 将其保存到loaclStrage中
    //   localStorage.setItem(CURRENT_CITY_KEY, JSON.stringify(cityObj));
    // });
    let { label, value } = await get_Current_CityData();
    // let obj = await get_Current_CityData();
    // console.log(obj);
    this.setState({ cityName: label });
  }

  render() {
    return (
      <div>
        <div className="search">
          <Flex className="" justify="between">
            <div className="left">
              <Flex>
                <div className="area">
                  <span
                    onClick={() => {
                      // props.history.push("/citylist");
                      //   alert(11);
                      // 坑：此代码不生效：原因在于Search组件是一个非Route注册的组件，所以此组件中不能调用路由的history对象
                      //  解决方案: 使用 react-router-dom这个包中的withRouter方法将Search组件重新包装以后，就能使用history对象了
                      // 代码写法：import {withRouter} from 'react-router-dom'; export default withRouter(Search)
                      this.props.history.push("/citylist");
                    }}
                  >
                    {this.state.cityName}
                  </span>
                  <i className="iconfont icon-arrow arrow"></i>
                </div>
                <div className="seachicon">
                  <Flex>
                    <input type="text" placeholder="请输入小区或地址" />

                    <i className="iconfont icon-seach"></i>
                  </Flex>
                </div>
              </Flex>
            </div>

            <i
              onClick={() => {
                this.props.history.push("/map");
              }}
              className="iconfont icon-map right"
            ></i>
          </Flex>
        </div>
      </div>
    );
  }
}
// 解决非Route注册组件中使用history对象的步骤2：
export default withRouter(Search);
